<template>
  <div>
    <van-nav-bar :title="chargingInfo.equipNo + '-' + this.$route.query.channelNo" left-arrow left-text="用户"  @click-left="onClickLeft"/>
    <!-- 电动汽车 -->
    <div class="block charging car">
      <div class="image">
        <img src="../assets/充电2.png" alt="" srcset=""  v-if="chargingInfo.equipType === 3 || chargingInfo.equipType === 4 || chargingInfo.equipType === 2">
        <img src="../assets/充电1.png" alt="" srcset="" v-else>
      </div>
      <div class="box">
        <div class="battery">
          <div class="inner">
            <div class="color" :style="{width: percentage + '%'}"></div>
            <div class="line l1"></div>
            <div class="line l2"></div>
            <div class="line l3"></div>
            <div class="line l4"></div>
          </div>
          <div class="zhengji"></div>
        </div>
        <div class="value">
          <!-- 100% -->
          正在充电中...
        </div>
      </div>
    </div>
    <van-cell-group inset class="mt15">
      <ul class="base-btns">
        <li>
          <div class="value">{{chargingInfo.startTime}}</div>
          <div class="label">开始时间</div>
        </li>
        <li>
          <div class="value">{{nowTime}}</div>
          <div class="label">计费时间<span style="color: #00cc00" @click="initChargingInfo">更新</span></div>
        </li>
      </ul>
      <van-field v-model="chargingInfo.chargingModel" label="启动充电方式" />
    </van-cell-group>
    <van-cell-group inset class="mt15">
      <ul class="base-btns">
        <li>
          <div class="value">{{chargingInfo.charge_minutes}} 分钟</div>
          <div class="label">充电时长</div>
        </li>
        <li>
          <div class="value">¥ {{chargingInfo.amount}}</div>
          <div class="label">消费金额</div>
        </li>
        <li v-if="(chargingInfo.equipType === 1 ) && chargingInfo.isShowPower === 1">
          <div class="value">{{chargingInfo.chargingPower}} 瓦</div>
          <div class="label">当前功率</div>
        </li>
        <li v-if="(chargingInfo.equipType === 3 || chargingInfo.equipType === 4 || chargingInfo.equipType === 2) && chargingInfo.isShowPower === 1">
          <div class="value">{{chargingInfo.degree}} 度</div>
          <div class="label">用电度数</div>
        </li>
      </ul>
    </van-cell-group>
    <div class="block" style="text-align: center">
      <van-button type="danger" plain size="large" :disabled="closeFlag" @click="closeCharge"><span v-if="!closeFlag">结束充电</span><van-loading type="spinner" v-if="closeFlag" color="#ff0000" >结束充电中</van-loading> </van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Charging',
  data () {
    return {
      nowTime: null,
      percentage: 20,
      chargingInfo: {
        charge_minutes: 0,
        equipType: 1,
        equipNo: 111111,
        degree: 0,
        amount: 0,
        chargingPower: 0,
        maxChargingPower: 0,
        chargingRecordId: 0,
        startTime: '',
        chargingInfo: ''
      },
      chartOption: {},
      initOptions: {
        renderer: 'canvas'
      },
      closeFlag: false
    }
  },
  components: { },
  computed: {

  },
  methods: {
    timeNow () {
      const parseValue = (value) => {
        return value < 10 ? '0' + value : value
      }
      const date = new Date()
      // parseValue(date.getFullYear()) + '-' +
      this.nowTime = parseValue(date.getMonth() + 1) + '-' + parseValue(date.getDate()) + ' ' + parseValue(date.getHours()) + ':' + parseValue(date.getMinutes()) + ':' + parseValue(date.getSeconds())
    },
    onClickLeft () {
      this.$router.push('/')
      this.$store.dispatch('updateUserInfo')
    },
    initChargingInfo () {
      this.$http.get('/getChargingInfo', {
        params: {
          equipId: this.$route.query.equipId,
          channelNo: this.$route.query.channelNo
        }
      }).then(res => {
        if (res.code === 200) {
          this.chargingInfo = res.data
          this.changeValue()
          this.timeNow()
        } else {
          this.showFailAlert()
        }
      })
    },
    formatterModel () {
      if (this.chargingInfo.planChargingTime === 0) {
        return '充满自停'
      } else {
        return '计划充电' + this.chargingInfo.planChargingTime + '小时'
      }
    },
    // 结束充电
    closeCharge () {
      if (this.closeFlag) {
        return
      }
      this.$dialog.confirm({
        title: '操作警告',
        message: '确认要结束充电？'
      }).then(() => {
        // on confirm
        this.closeFlag = true
        this.$http.post(
          '/system/equip/closeChannel',
          this.$qs.stringify({ equipNo: this.chargingInfo.equipNo, channelNo: this.$route.query.channelNo }),
          {
            timeout: 60000
          }
        ).then(res => {
          this.closeFlag = false
          if (res.code === 200) {
            this.$router.push('/')
            this.$store.dispatch('updateUserInfo')
          } else {
            this.$toast(res.msg)
          }
        })
      }).catch(() => {
        // on cancel
        this.closeFlag = false
      })
    },
    showFailAlert () {
      this.$dialog.alert({
        title: '请求失败',
        message: '获取充电信息失败，点击按钮返回主页！',
        closeOnPopstate: false
      }).then(() => {
        this.$router.push('/')
      })
    },
    changeValue () {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.percentage += 20
        if (this.percentage > 100) {
          this.percentage = 20
        }
      }, 1000)
    },
    /**
     * 定时刷新页面
     */
    refresh () {
      this.timer2 = setInterval(() => {
        this.initChargingInfo()
      }, 10000)
    }
  },
  created () {
    if (this.$route.query.equipId && this.$route.query.channelNo) {
      this.initChargingInfo()
    } else {
      this.showFailAlert()
    }
    this.changeValue()
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
    clearInterval(this.timer2)
  }
}
</script>

<style scoped lang='less'>
.charging {
  position: relative;
  display: flex; justify-content: space-between;
  background: #fff;
  padding: 15px 30px; padding-bottom: 20px;
  .image {
    flex: auto; text-align: center;
    img {
      height: 120px;
    }
  }
  .box {
    width: 112px;
    padding-top: 30px;
    .battery {
      position: relative;
      width: 80px;
      height: 30px;
      padding: 2px;
      border: solid 4px #666;
      border-radius: 5px;
      .inner {
        position: relative;
        height: 100%;
        .color {
          height: 100%;
          background: #0c0;
        }
        .line {
          position: absolute; top: 0px; left: 50%;
          width: 1px; height: 30px;
          background: #fff;
          &.l1 {
            left: 20%;
          }
          &.l2 {
            left: 40%;
          }
          &.l3 {
            left: 60%;
          }
          &.l4 {
            left: 80%;
          }
        }
      }
      .zhengji {
        position: absolute; right: -7px; top: 8px;
        width: 4px; height: 16px;
        background: #666;
        border-radius: 0 2px 2px 0;
      }
    }
    .value {
      width: 90px;
      padding-top: 10px;
      text-align: center;
    }
  }
  .time {
    position: absolute; bottom: 5px; left: 50%; transform: translate(-50%, 0);
    font-size: 11px; color: #999;
  }
}
.base-btns {
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  li {
    text-align: center;
    flex: auto;
    border-right: solid 1px #f5f5f5;
    &:last-child {
      border: none;
    }
    .value {
      margin-bottom: 10px;
      font-size: 16px;
    }
    .label {
      font-size: 12px; color: #999;
    }
  }
}
.charts {
  height: 150px;
}
</style>
